<template>
  <div id="homepage">
    <i class="el-icon-full-screen fullscreen" @click="fullScreen()"></i>

    <div class="header">
      <img class="title" src="./title.png" />
      <!-- <div class="title-font">宏凯铝业5G智慧工厂总览</div> -->
      <div class="title-font">加多利铝业5G智慧工厂能源看板</div>
      <div class="now">{{ nowDate }}</div>
    </div>
    <div class="container">
      <div class="row flex-between box">
        <div class="pannel">
          <img class="label" src="./label1.png" />
          <div class="flex-relative">
            <img class="box-img" src="./sign.png" />
            <div class="box-info">设备信息</div>
          </div>
          <div class="row flex-wrap">
            <div
              class="device-info"
              v-for="item in info.deviceStatusList"
              :key="item.id"
            >
              <img
                style="width: 80px; height: 80px"
                v-if="item.deviceName.includes('挤压机')"
                src="./device1.png"
              />
              <img
                style="width: 80px; height: 80px"
                v-else
                src="./device2.png"
              />
              <div class="device-name">{{ item.deviceName }}</div>
              <div class="close" v-if="item.runStatus == 0">未运行</div>
              <div class="close" v-else-if="item.runStatus == 2">离线</div>
              <div class="run" v-else>运行中</div>
            </div>
          </div>
        </div>
        <div class="pannel">
          <img class="label" src="./label1.png" />
          <div class="flex-relative">
            <img class="box-img" src="./sign.png" />
            <div class="box-info">产线用能</div>
          </div>
          <div class="cTime2">{{ ctime }}</div>
          <div id="bar2" style="width: 100%; height: 340px"></div>
          <div class="time">{{ this.moment().format("yyyy-MM-DD") }}</div>
        </div>
        <div class="pannel">
          <img class="label" src="./label1.png" />
          <div class="flex-relative">
            <img class="box-img" src="./sign.png" />
            <div class="box-info">电表信息</div>
          </div>
          <div style="margin-top: 25px">
            <div
              class="row model-pannel"
              v-for="item in info.electricityMeterList"
              :key="item.id"
            >
              <div class="model-title">{{ item.deviceName }}</div>
              <div
                v-for="(subitem, index) in item.total"
                class="row"
                :key="subitem.id"
              >
                <div class="model-number">{{ subitem }}</div>
              </div>
              <div class="unit">度</div>
            </div>
          </div>
        </div>
      </div>
      <div class="row flex-between box">
        <div class="pannel2">
          <img class="label" src="./label3.png" />
          <div class="flex-relative">
            <img class="box-img" src="./sign.png" />
            <div class="box-info">总用电统计</div>
          </div>
          <div id="bar" style="width: 100%; height: 350px"></div>
        </div>
        <div class="pannel2">
          <img class="label" src="./label3.png" />
          <div class="flex-relative">
            <img class="box-img" src="./sign.png" />
            <div class="box-info">班次用电统计</div>
          </div>
          <div id="line" style="width: 100%; height: 350px"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { energyDashboard } from "@/api/system/device";
import {} from "@/api/article";
import { getToken } from "@/utils/auth";
import moment from "moment";
import echarts from "echarts";
// import autofit from "autofit.js";
export default {
  components: {},
  filters: {},
  data() {
    return {
      chartLine: null,
      chartBar: null,
      chartBar2: null,
      info: {},
      deviceList: [
        // { name: "挤压机1" },
        // { name: "挤压机2" },
        // { name: "挤压机3" },
        // { name: "挤压机4" },
        // { name: "挤压机5" },
        // { name: "时效炉" },
      ],
      moment: null,
      nowDate: null,
      refreshInterval: null,
      ctime: null,
    };
  },
  created() {},
  beforeDestroy() {
    // 组件卸载时清除定时器
    if (this.refreshInterval) {
      clearInterval(this.refreshInterval);
    }
  },
  mounted() {
    this.moment = moment;
    this.getList();
    // 组件挂载时启动定时器
    this.refreshInterval = setInterval(() => {
      this.getList();
    }, 300000);
    setInterval(() => {
      this.nowDate = this.moment().format("yyyy-MM-DD HH:mm:ss");
      // 计算ctime
      const now = moment();
      const hour = now.hour();
      this.ctime =
        hour < 8
          ? moment().subtract(2, "days").format("MM月DD日")
          : moment().subtract(1, "days").format("MM月DD日");
    }, 1000);
    document.addEventListener("fullscreenchange", this.checkFullscreen);
  },
  methods: {
    checkFullscreen() {
      this.isFullscreen = !!document.fullscreenElement;
      console.log("当前全屏状态:", this.isFullscreen);
    },
    fullScreen() {
      if (!document.fullscreenElement) {
        document.documentElement
          .requestFullscreen()
          .then(() => {
            this.isFullscreen = true;
            this.$store.commit("app/TOGGLE_FULLSCREEN", true);
          })
          .catch((err) => {
            console.error("全屏错误:", err);
          });
      } else {
        document.exitFullscreen().then(() => {
          this.isFullscreen = false;
          this.$store.commit("app/TOGGLE_FULLSCREEN", false);
        });
      }
    },
    drawBar2() {
      this.chartBar2 = echarts.init(document.getElementById("bar2"));
      // 指定图表的配置项和数据
      var option = {
        title: {},
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "2%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [],
          axisLabel: {
            color: "#fff",
            interval: 0,
          },
        },
        yAxis: {
          type: "value",
          name: "度",
          axisLabel: {
            color: "#fff",
          },
          nameTextStyle: {
            color: "#fff",
            fontSize: 12,
          },
        },
        series: [
          {
            barWidth: "20px",
            type: "bar",
            itemStyle: {
              color: "#2e82ff",
            },
            data: [],
          },
        ],
      };
      option.xAxis.data = this.info.lineEnergyList.map((e) => e.deviceName);
      option.series[0].data = this.info.lineEnergyList.map((e) => e.total);
      // 使用刚指定的配置项和数据显示图表。
      this.chartBar2.setOption(option);
    },
    drawBar() {
      this.chartBar = echarts.init(document.getElementById("bar"));
      // 指定图表的配置项和数据
      var option = {
        title: {},
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "2%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [],
          axisLabel: {
            color: "#fff",
          },
        },
        yAxis: {
          type: "value",
          name: "度",
          axisLabel: {
            color: "#fff",
            interval: 0,
          },
          nameTextStyle: {
            color: "#fff",
            fontSize: 12,
          },
        },
        series: [
          {
            barWidth: "20px",
            type: "bar",
            itemStyle: {
              color: "#2e82ff",
            },
            data: [120, 132, 101, 134, 90, 230, 210],
          },
        ],
      };
      option.xAxis.data = this.info.totalEnergyList.map((e) => e.date);
      option.series[0].data = this.info.totalEnergyList.map((e) => e.total);
      // 使用刚指定的配置项和数据显示图表。
      this.chartBar.setOption(option);
    },
    drawLine() {
      this.chartLine = echarts.init(document.getElementById("line"));
      // 指定图表的配置项和数据
      var option = {
        title: {},
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["甲班", "乙班"],
          top: 10,
          itemShape: "rect",
          itemWidth: 20,
          itemHeight: 10,
          lineStyle: {
            width: 0,
          },
          textStyle: {
            //图例文字的样式
            color: "#fff", //图例文字颜色
            fontSize: 12, //图例文字大小
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "2%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
          axisLabel: {
            color: "#fff",
          },
        },
        yAxis: {
          type: "value",
          name: "度",
          axisLabel: {
            color: "#fff",
          },
          nameTextStyle: {
            color: "#fff",
            fontSize: 12,
          },
        },
        series: [],
      };
      option.xAxis.data = this.info.shiftEnergySummary.shiftA.map(
        (e) => e.date
      );
      option.series.push({
        name: "甲班",
        type: "line",
        symbol: "circle",
        itemStyle: {
          color: "green", // 设置折线颜色
        },
        data: this.info.shiftEnergySummary.shiftA.map((e) => e.total),
      });
      option.series.push({
        name: "乙班",
        type: "line",
        symbol: "circle",
        itemStyle: {
          color: "orange", // 设置折线颜色
        },
        data: this.info.shiftEnergySummary.shiftB.map((e) => e.total),
      });
      // 使用刚指定的配置项和数据显示图表。
      this.chartLine.setOption(option);
    },
    /** 查询用户列表 */
    getList() {
      let params = {
        startDate: moment().add(-30, "days").format("yyyy-MM-DD"),
        endDate: moment().format("yyyy-MM-DD"),
      };
      energyDashboard(params).then((res) => {
        this.info = res;
        console.log("res", res);
        this.drawBar();
        this.drawBar2();
        this.drawLine();
      });
    },
  },
};
</script>
<style scoped>
#homepage {
  background: rgb(0, 17, 32);
  height: 100%;
  /* height: calc(100vh - 50px); */
}
.header {
  position: absolute;
}
.title {
  width: 100%;
  height: 100%;
}
.label {
  width: 100%;
  position: absolute;
}
.box-info {
  position: absolute;
  top: 0;
  z-index: 9;
  color: #fff;
  margin-left: 20px;
  line-height: 36px;
}
.box-img {
  height: 32px !important;
  width: 200px !important;
}
.pannel {
  width: 33%;
  height: 380px;
  position: relative;
}
.pannel img {
  height: 380px;
}
.pannel2 {
  margin-top: 6px;
  width: 49.8%;
  position: relative;
}
.pannel2 img {
  height: 390px;
}
.box {
  margin: 0 10px;
}
.row {
  display: flex;
}
.flex-between {
  justify-content: space-between;
}
.container {
  position: relative;
  top: 90px;
}
.model-title {
  width: 150px;
  text-align: center;
  height: 50px;
  line-height: 50px;
}
.model-pannel {
  height: 50px;
  line-height: 50px;
  color: #fff;
}
.device-info {
  color: #fff;
  width: 33%;
  text-align: center;
  margin-top: 20px;
  position: relative;
  z-index: 1;
}
.device-name {
  line-height: 32px;
}
.run {
  color: rgb(81, 245, 12);
  line-height: 32px;
}
.close {
  color: red;
  line-height: 32px;
}
.flex-wrap {
  flex-wrap: wrap;
}
.time {
  color: #fff;
  width: 100%;
  text-align: center;
  margin-top: 20px;
}
.now {
  color: #fff;
  position: absolute;
  right: 26px;
  bottom: 65%;
  z-index: 99;
}
.model-number {
  background: rgb(45, 56, 86);
  color: #71cef8;
  width: 30px;
  font-weight: bold;
  border-bottom: 2px solid #71cef8;
  text-align: center;
  margin-bottom: 6px;
  margin-right: 10px;
}
.model-sign {
  margin-right: 6px;
  font-weight: bold;
}

.title-font {
  font-size: 36px;
  color: #ffffff;
  font-weight: bold;
  font-family: YouSheBiaoTiHei;
  line-height: 50px;
  letter-spacing: 6px;
  text-shadow: 0px 0px 10px #89b7fe;
  text-align: center;
  font-style: normal;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
}
.unit {
  font-size: 18px;
  line-height: 50px;
  width: 60px;
  text-align: center;
}
.fullscreen {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 999;
  color: yellow;
}
.cTime2 {
  color: #fff;
  position: absolute;
  right: 20px;
  top: 10px;
}
</style>
